<template>
	<view>
		<view class="top">
			<view class="title">
				{{info.data.title}}
			</view>

			<view class="xmt24 xflex-x-between">
				<view class="xflex-x">
					<image class="user" :src="info.data.user.avatar || ''" mode=""></image>
					<view class="name">
						{{info.data.user.nickname?info.data.user.nickname:''}}
					</view>
				</view>
				<view class="time">
					{{info.data.createtime}}
				</view>
			</view>


			<view class="xflex-x-between xmt32">
				<view class="xflex-x">
					<view class="span xmr24" v-for="(item,index) in info.data.label"  :key="index">
						#{{item}}
					</view>
				</view>

				<view class="addres xflex-x">
					<image class="addresicon" src="/static/image/car/weizhi.png" mode=""></image>
					<view class="addresText">
						{{info.data.address}}
					</view>
				</view>
			</view>
		</view>


		<view class="content">
			{{info.data.content}}
		</view>
		
		<view class="xmt32">
			<image class="img xmr10" v-for="(itm,indx) in info.data.images" @click="openimg(indx)" :src="itm" mode="widthFix" :key="indx"></image>
		</view>

		<view class="xbottom xflex-x-between">
			<view class="left xflex-x" @click="commentData.show = true">
				<image class="bi" src="/static/image/car/bi.png" mode=""></image>
				<view class="">
					说点儿什么呗~
				</view>
			</view>
			<view class="xflex-x">
				<view class="xflex-x xmr32" @click="commentData.show = true">
					<image class="left-icon" src="/static/image/car/pl.png" mode=""></image>
					<view class="text">
						{{info.data.comments_count}}
					</view>
				</view>

				<view class="xflex-x" @click="getlike(info.data)">
					<image v-if="info.data.zan == 0" class="left-icon" src="/static/image/car/dz.png" mode=""></image>
					<image v-if="info.data.zan == 1" class="left-icon" src="/static/image/car/icon_dz_s@2x.png" mode="">
					</image>
					<view class="text">
						{{info.data.like}}
					</view>
				</view>
			</view>
		</view>


		<u-popup :show="commentData.show" @close="commentData.show = false" @open="open" :closeOnClickOverlay="true">
			<view class="popup">
				<view class="popup-title">
					评论
				</view>
				<scroll-view scroll-y="true" >
					
					<view class="" style="height: 870rpx;">
						<view class="" v-for="(ibs,index) in commentData.list" :key="index">
							<view class="xflex-x-between" >
								<view class="xflex-x">
									<image class="popup-avatar" :src="ibs.user.avatar || ''" mode=""></image>
									<view class="">
										<view class="popup-name">
											{{ibs.user.nickname?ibs.user.nickname:''}}
										</view>
										<view class="popup-time">
											{{ibs.createtime}}
										</view>
									</view>
								</view>
								<view class="xflex-x">
									<image class="popup-zan" v-if="ibs.zan == 0" @click="addcommentlinks(ibs,index)"  src="/static/image/car/dz.png" mode=""></image>
									<image class="popup-zan" v-if="ibs.zan == 1" @click="addcommentlinks(ibs,index)" src="/static/image/car/icon_dz_s@2x.png" mode=""></image>
									<view class="popup-zans">
										{{ibs.like}}
									</view>
								</view>
							</view>
							<view class="popup-content">
								{{ibs.content}}
							</view>
						</view>
					</view>
					
					
				</scroll-view>
				
				<view class="popup-ipy">
					<view class="popup-iput xflex-x">
						<image class="bi" src="/static/image/car/bi.png" mode=""></image>
						<input type="text" v-model="info.content" placeholder="说点儿什么呗~" confirm-type="send" @confirm="send" >
					</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script setup>
	import {
		infoDetail,
		infolike,
		commentList,
		addcomment,
		addcommentlink
	} from '@/network/home.js'
	import {
		reactive
	} from 'vue';
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh,
		
	} from '@dcloudio/uni-app';

	const getlike = (item) => {
		infolike({
			article_id: item.id
		}).then(res => {
			getinfo()
		})
	}

	// 获取帖子信息
	let info = reactive({
		data: {
			user: {
				avatar: '',
			},
			zan: '',
		},
		id: '',
		content:''
	})
	
	const openimg =(index) =>{
		uni.previewImage({
			urls:info.data.images,
			current:index
		})
	}

	const getinfo = () => {
		infoDetail({
			id: info.id
		}).then(res => {

			info.data = res.data
			console.log(info.data, "=========", res);
		})
	}
	

	
	// 获取评论
	let commentData = reactive({
		list:[],
		show:false
	})
	const getcommentList = () =>{
		commentList({
			article_id: info.id
		}).then(res=>{
			console.log(res);
			commentData.list = res.data.lists
			
		})
	}
	
	
	const addcommentlinks = (item,index) =>{
		addcommentlink({
			comment_id: item.id
		}).then(res => {
			commentData.list[index].zan == 0 ? commentData.list[index].zan = 1:commentData.list[index].zan = 0
			commentData.list[index].zan == 0 ?commentData.list[index].like -= 1 :commentData.list[index].like += 1
		})
		
	}
	
	// 发布
	const send = () =>{
		addcomment({
			article_id:info.id,
			content:info.content
		}).then(res=>{
			uni.showToast({
				title:'发布成功'
			})
			info.content = ''
			getcommentList()
		})
	}

	onLoad((Option) => {
		info.id = Option.id
		// info.id = 1
		getinfo()
		getcommentList()
	})
</script>

<style lang="scss" scoped>
	.top {
		padding: 17rpx 32rpx;
		box-sizing: border-box;
	}

	.title {
		width: 686rpx;
		height: 71rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 40rpx;
		margin: auto;
		margin-top: 17rpx;
	}

	.user {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.name {
		margin-left: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
		line-height: 48rpx;
	}

	.time {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.left {
		width: 400rpx;
		height: 68rpx;
		background: #F5F5F5;
		border-radius: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #666666;
		padding: 21rpx 25rpx;
		box-sizing: border-box;

		&-icon {
			width: 44rpx;
			height: 44rpx;
			margin-right: 11rpx;
		}
	}

	.bi {
		width: 24rpx;
		height: 24rpx;
	}

	.content {
		padding: 26rpx 32rpx;
	}

	.span {
		background: #EEEEEE;
		border-radius: 10rpx;

		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		line-height: 48rpx;
		padding: 12rpx 18rpx;

	}

	.addresicon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 4rpx;
	}

	.addresText {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;

	}
	
	.popup {
		height: 1045rpx;
		padding: 38rpx 33rpx;
		box-sizing: border-box;
		
		&-title {
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
			text-align: center;
		}
		
		&-avatar {
			width: 62rpx;
			height: 62rpx;
			background: #EEEEEE;
			
			border-radius: 50%;
			margin-right: 17rpx;
		}
		
		&-time {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #666666;
			margin-top: 14rpx;
		}
		
		&-name {
			font-weight: bold;
			font-size: 28rpx;
			color: #666666;
		}
		
		&-zan {
			width: 36rpx;
			height: 36rpx;
		}
		
		&-zans {
			font-weight: bold;
			font-size: 24rpx;
			color: #666666;
		}
		
		&-content {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
			padding: 37rpx 27rpx 40rpx;
		}
		
		&-iput {
			width: 100%;
			height: 68rpx;
			background: #F5F5F5;
			border-radius: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #666666;
			padding: 21rpx 25rpx;
			box-sizing: border-box;
			
			
			&-icon {
				width: 44rpx;
				height: 44rpx;
				margin-right: 11rpx;
			}
		}
		
		&-ipy {
			// padding: 16rpx 30rpx;
			box-sizing: border-box;
			
		}
	}
	
	.img {
		width: 100%;
	}
</style>